<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<head>
	<title>Dashboard | Klorofil - Free Bootstrap Dashboard Template</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../assets/vendor/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../assets/vendor/linearicons/style.css">
	<link rel="stylesheet" href="../assets/vendor/chartist/css/chartist-custom.css">
	<!-- MAIN CSS -->
	<link rel="stylesheet" href="../assets/css/main.css">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" href="../assets/css/demo.css">
	<!-- GOOGLE FONTS -->
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="../assets/img/favicon.png">
</head>

<body>
	<!-- WRAPPER -->
	<div id="wrapper">
		<!-- NAVBAR -->
		<%@include file="../top-bar.jsp" %>
		<!-- END NAVBAR -->
		<!-- LEFT SIDEBAR -->
		<%@include file="../left-bar.jsp" %>
		<!-- END LEFT SIDEBAR -->
		<!-- MAIN -->
		<div class="main">
			<!-- MAIN CONTENT -->
			<div class="main-content">
				<div class="container-fluid">
					<h3 class="page-title">用户信息浏览</h3>
					<div class="row">
						<div class="col-md-12">
							<!-- TABLE HOVER -->
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title"></h3>
								</div>
								<div class="panel-body">
									<table class="table table-hover">
										<thead>
										<tr>
											<th>用户名</th>
											<th>昵称</th>
											<th>性别</th>
											<th>出生年月</th>
											<th>城市</th>
											<th>个性签名</th>
										</tr>
										</thead>
										<tbody class="showUserInfo">

										</tbody>
									</table>
								</div>
							</div>
							<!-- END TABLE HOVER -->
						</div>
					</div>
					<div class="row userInfo">
						<ul class="pagination" style="margin-left: 800px">

						</ul>
					</div>
				</div>
			</div>
			<!-- END MAIN CONTENT -->
		</div>
		<!-- END MAIN -->
		<div class="clearfix"></div>
		<%@include file="../footer-bar.jsp" %>
	</div>
	<!-- END WRAPPER -->

	<!-- Javascript -->
	<script src="../assets/vendor/jquery/jquery.min.js"></script>
	<script src="../assets/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="../assets/vendor/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	<script src="../assets/vendor/jquery.easy-pie-chart/jquery.easypiechart.min.js"></script>
	<script src="../assets/vendor/chartist/js/chartist.min.js"></script>
	<script src="../assets/scripts/klorofil-common.js"></script>
        <script language="JavaScript">
            $(
                function () {
                    showUserInfoByPage(1);
                }
            )
        /**
         * 分页查询用户信息
         */

        function showUserInfoByPage(curPage) {
            $.ajax({
                url:"/userInfo/showUserInfoByPage",
                data:{
                    page:curPage,
                    rows:6
                },
                type:"post",
                dataType:"json",
                success:function (result) {
                    var tbody = "";
                    for(var i=0;i<result.rows.length;i++){
                        tbody += '<input type="hidden" name="id" value="'+result.rows[i].id+'" />';
                        tbody += '<a href="/userInfoJSP/showOneUserBodyInfo?userId=\'+result.rows[i].id+\'">';
                        tbody += '<tr onclick="showOneUserBody('+result.rows[i].id+')">';
                        tbody += '<td>'+result.rows[i].username+'</td>';
                        tbody += '<td>'+result.rows[i].userNickname+'</td>';
                        tbody += '<td>'+result.rows[i].userSex+'</td>';
                        tbody += '<td>'+result.rows[i].userBirth+'</td>';
                        tbody += '<td>'+result.rows[i].userCity+'</td>';
                        tbody += '<td>'+result.rows[i].userSign+'</td>';
                        tbody += '</tr>';
                        tbody += '</a>';
                    }
                    $(".showUserInfo").html(tbody);
                    var pageTotal = result.total/6;
                    var breakPage = '';
                    breakPage += ' <li><a href="#">&laquo;</a></li>';
                    for(var j=0;j<pageTotal;j++){
                        breakPage += ' <li><a href="javascript:showUserInfoByPage('+(j+1)+')">'+(j+1)+'</a></li>';
                    }
                    breakPage += ' <li><a href="#">&raquo;</a></li>';
                    $(".userInfo .pagination").html(breakPage);
                },
                error:function () {
                    alert("没有获取到这个活动");
                }
            });
        }

            /**
			 * 查看当前用户身体情况
             */
            function showOneUserBody(id) {
				$(location).attr("href","/userInfoJSP/showOneUserBodyInfo?userId="+id+"");
            }
	</script>
</body>

</html>
